demo.gif
实现这个小游戏, 需要哪些知识点了？
一. 加载图片
Future<ui.Image> getImage(String path) async {
ByteData data = await rootBundle.load(path);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
FrameInfo frameInfo = await codec.getNextFrame();
image = frameInfo.image;
return image;
}
二. 绘图api
在flutter中有着跟android近乎一样的canvas API. 但是也有些差异
- Android中的Rect.offset/Rect.offsetTo直接生效, 对应flutter中的React.shift, 结果在返回值里.
- Android中的画布通过bitmap构建canvas, 接着直接调用canvas绘制, 绘制的内容就跑到bitmap上了, 而在flutter里需要这样
PictureRecorder recorder = PictureRecorder();
Canvas canvas = Canvas(recorder, Rect.fromLTWH(0.0, 0.0, width, height));
canvas.drawXXX();
...
Image image = canvas.endRecording().toImage(saveWidth, saveHeight);
//保存
image.toByteData(format: ImageByteFormat.png).then((data) {
File file = File(path);
file.writeAsBytes(data.buffer.asUint8List());
})
- Android里绘制文字比较直观, 通过paint设置蚕食, 然后直接canvas.drawText, flutter里第一次用有点周折
ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
textAlign: TextAlign.center,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.normal,
fontSize: hitNode == node ? 20.0 : 15.0,
));
pb.pushStyle(ui.TextStyle(color: Color(0xff00ff00)));
pb.addText('${node.index + 1}');
ParagraphConstraints pc = ParagraphConstraints(width: node.rect.width);
//这里需要先layout, 后面才能获取到文字高度
Paragraph paragraph = pb.build()..layout(pc);
//文字居中显示
Offset offset = Offset(node.rect.width * (node.curIndex%level), node.rect.width * ((node.curIndex/level).floor() + 0.5) - paragraph.height/2);
canvas.drawParagraph(paragraph, offset);
三. 动画
Android里有属性动画, Flutter也有对应的动画, 但是多了个AnimationController.dispose调用
AnimationController controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
);
ani = IntTween(begin: 0, end: 100).animate(controller);
ani.addListener(() {
print(ani.value);
})
controller.forward();
//释放资源
controller.dispose();
四. 实现差异
Android里可以直接在自定义View里写完所有代码(绘制和交互逻辑), 调用上层完全不需要关心内部如何实现. 状态变更直接View.invalidate.
而在flutter里需要实现CustomPainter, 它只负责显示(绘制). 而状态变更和交互逻辑则写在StateWidget里. 这也符合flutter通过状态管理的理念.
只不过要传递大量参数到下层, 稍显麻烦, 仅仅只是为了一个draw(显示).
五. 游戏可解性
可以通过计算这个排列的逆序数个数加空格位置的坐标, 最终得到的数的奇偶性判断, 如果不ok, 再继续生成直到ok.
